<template>
  <div class="card-out-container">
    <CustomTable storeTableName="positionInfoList" rowKey="id" :loading="loading" :dataSource="dataSource" :columns="columns" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, fixed: 'left'}" :pagination="ipagination" :scroll="{y: 'calc(100vh - 390px)'}" @change="handleTableChange">
      <template #operateLeft>
        <div class="operate-left">
          <a-button v-if="hasPermission('system:post:add')" type="primary" @click="handleAdd">{{$t('common.addNew')}}</a-button>
          <a-button ghost v-if="hasPermission('system:post:delete')" type="warning" :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{$t('common.delMore')}}</a-button>
        </div>
      </template>
      <template #operateRight>
        <a-form layout="inline">
          <a-form-item>
            <a-input v-model:value.trim="queryParam.name" :placeholder="$t('components.jobName')" @keyup.enter="loadData" allowClear />
          </a-form-item>
          <a-space>
            <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
            <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
          </a-space>
        </a-form>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'code'">
          <span v-if="hasPermission('system:post:get')" class="code-link" @click="handleDrawDetail(scope.record)">{{scope.record.code}} </span>
          <span v-else>{{scope.record.code}}</span>
        </template>
        <template v-else-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button v-if="hasPermission('system:post:edit')" type="link" class="primary-link" @click="handleEdit(scope.record)">{{$t('common.editor')}}</a-button>
            <a-divider type="vertical" />
            <a-button v-if="hasPermission('system:post:delete')" type="link" class="warning-link" @click="handleDelete(scope.record.id)">{{$t('common.del')}}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>
    <commone-modal ref="modalForm" tableName="positionInfo" :cloSapn="24" :modalTitle="$t('sysManage.job')" @ok="modalFormOk">
    </commone-modal>
    <detail-draw ref="detailForm"></detail-draw>
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import CommoneModal from '@/components/commonModal/normalModal.vue'
import DetailDraw from './modules/detailDraw.vue'
import { formatTime, hasPermission } from '@/utils'
import CustomTable from '@/components/commonTable/customTable.vue'
export default {
  name: 'positionInfo',
  mixins: [ListMixinPm],
  components: {
    CommoneModal,
    DetailDraw,
    CustomTable
  },
  data () {
    return {
      storeName: 'getPost',
      url: {
        list: '/api/system/post/list-fuzzy-by-page',
        delete: '/api/system/post/delete'
      },
      columns: [
        {
          title: this.$t('common.sequenceNo'), dataIndex: 'index', key: 'index', align: 'center', width: 60,
          customRender: ({ index }) => {
            return index + 1
          }
        },
        { title: this.$t('sysManage.jobCode'), dataIndex: 'code', key: 'code', align: 'center' },
        { title: this.$t('sysManage.jobTitle'), dataIndex: 'name', key: 'name', align: 'center' },
        { title: this.$t('common.remark'), dataIndex: 'remark', key: 'remark', align: 'center' },
        {
          title: this.$t('common.createTime'), dataIndex: 'createTime', key: 'createTime', align: 'center', timeType: 'time',
          customRender: ({ text }) => {
            return formatTime(text, 'YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          title: this.$t('common.updateTime'), dataIndex: 'updateTime', key: 'updateTime', align: 'center', timeType: 'time',
          customRender: ({ text }) => {
            return formatTime(text, 'YYYY-MM-DD HH:mm:ss')
          }
        },
        { title: this.$t('common.operate'), dataIndex: 'operate', key: 'operate', align: 'center', width: 130 },
      ],
      showMore: true
    }
  },
  methods: {
    hasPermission
  }
}
</script>